<script setup>
import { reactive } from "vue"
import { useRouter } from "vue-router";

const router = useRouter()

const navList = reactive([{
    id: 1000,
    title: "首页",
    path: "/",
    icon: "HomeFilled"
},
{
    id: 1001,
    title: "个人办公",
    path: "/mytask",
    icon: "Notebook",
    children: [{
        id: 100101,
        title: "我的任务",
        path: "/mytask",
        name: "mytask",
        icon: "Notebook"
    }, {
        id: 100102,
        title: "申请",
        path: "/apply",
        name: "apply",
        icon: "EditPen"
    }]
},
{
    id: 1002,
    title: "人事管理",
    path: "/staff",
    icon: "User",
    children: [{
        id: 100201,
        title: "员工档案",
        path: "/staff",
        icon: "User"
    }, {
        id: 100202,
        title: "人事合同",
        path: "/contract",
        icon: "Tickets"
    }, {
        id: 100203,
        title: "部门管理",
        path: "/sector",
        icon: "House"
    }]
},
// {
//     id: 1003,
//     title: "薪酬管理",
//     path: "/salarymanage",
//     icon: "Money",
//     children: [{
//         id: 100301,
//         title: "薪酬管理",
//         path: "/salarymanage",
//         icon: "Money"
//     }, {
//         id: 100302,
//         title: "薪酬设置",
//         path: "/salaryset",
//         icon: "CreditCard"
//     }]
// },
{
    id: 1004,
    title: "考勤管理",
    path: "/attend",
    icon: "AlarmClock",
    children:[{
        id: 100401,
        title: "考勤管理",
        path: "/attend",
        icon: "AlarmClock"
    }]
}, 
{
    id: 1005,
    title: "系统公告",
    path: "/system",
    icon: "Menu",    
    children:[{
        id: 100501,
        title: "系统公告",
        path: "/system",
        icon: "Menu"
    }]
},
{
    id: 1006,
    title: "账号管理",
    path: "/accountmanage",
    icon: "Avatar",
    children:[{
        id: 100601,
        title: "账号管理",
        path: "/accountmanage",
        icon: "Avatar"
    },{
        id: 100602,
        title: "账号编辑",
        path: "/editaccount",
        icon: "CirclePlusFilled"
    }]
},
{
    id: 1007,
    title: "日志管理",
    path: "/logger",
    icon: "Calendar",
    children:[{
        id: 100701,
        title: "日志管理",
        path: "/logger",
        icon: "Calendar"
    }]
}])


const handleOpen = (key, keyPath) => {
    // console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    // console.log(key, keyPath)
}


function changePage(val, path){
    if(val === 100102){
        router.push({name:'apply',params:{id:1}});
    }else{
        router.push(path);
    }
}


</script>


<template>
    <el-menu 
    default-active="2" 
    class="el-menu-vertical-demo menuList" 
    @open="handleOpen" 
    @close="handleClose"
    >
        <el-sub-menu v-for="(item, idx) in navList" :index="idx+1+''" :class="item.children ? '' : 'hide_arrow'" @click="item.id === 1000 ? $router.push(item.path) : ''">
            <template #title>
                <el-icon :size="14">
                    <component :is="item.icon" class="icon-text-color" />
                </el-icon>
                <span class="icon-text-color"> {{ item.title }} </span>
            </template>
            <el-menu-item-group v-if="item.children">
                <!-- $router.push({name:val.name}) -->
                <el-menu-item v-for="(val,i) in item.children" :key="val.id" @click="changePage(val.id, val.path)" :index="(idx+1)+'-'+(i+1)">
                    <el-icon :size="12">
                        <component :is="val.icon" class="icon-text-color" />
                    </el-icon>
                    <span class="icon-text-color"> {{ val.title }} </span>
                </el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
    </el-menu>

</template>

<style>
.menuList .hide_arrow .el-sub-menu__icon-arrow{
  display:none
}
.icon-text-color{
    color: var(--el-color-primary);
}

.menuList .el-sub-menu .el-sub-menu__title{
    height: 40px;
    font-size: 14px;
}
.el-menu-item-group .el-menu-item-group__title{
    display: none;
} 
.el-menu-item-group ul .el-menu-item{
    height: 30px;
    font-size: 12px;
}

</style>